<template>
  <mars-dialog custom-class="zhyq-dialog" title="监测站点" width="400" height="calc(100% - 90px)"
  :defaultFold="defaultFoldFlag"
  :contractButton="true"
  :closeButton="false"
    :position="{ top: 30, left: 10 }">
    <div class="yjzy-search">
      <mars-select
        v-model:value="selectedValue"
        placeholder="请选择"
        :options="streets"
        @change="streetChange"
      />
    </div>
    <div class="yjzy-content">
      <div class="search-list">
        <div class="container1" v-for="(item, index) in currentViewData" :key="index" @click="flyTo(item)">
          <div class="container2">
            <!-- <span class="numSpan">{{ index + 1 }}</span> -->
             <div class="item-left" :style="{ color: item.colorCode }">
                <div class="num">{{ item.leqRtd }}</div>
                <div class="text">噪声值(dB)</div>
             </div>
             <div class="item-right">
              <div class="line1">
                {{ item.deviceName }}
                <!-- <span class="typeLabel typeLabel_detail" @click="openDetail(item)">详情</span> -->
              </div>
              <div class="line2">{{ item.monitorAddress }}</div>
              <div class="line3">{{ item.monitoringTime }}</div>
             </div>
          </div>
        </div>
        <div class="container1" v-if="!viewData.length">
          <p class="search-nodata">暂无数据</p>
        </div>
      </div>
    </div>
  </mars-dialog>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted, computed, ref } from "vue"
import { useWidget } from "@mars/common/store/widget"
import useLifecycle from "@mars/common/uses/use-lifecycle"
import { $message } from "@mars/components/mars-ui/index"
import * as mapWork from "./map"
import Bus from "@mars/utils/bus"
const { activate, getWidget, disable } = useWidget()
// 启用map.ts生命周期
useLifecycle(mapWork)


// 搜索的字段  所有数据  展示的数据
const selectedValue = ref("")
const streets = ref([])
const viewData = ref<any[]>([])
const currentViewData = ref<any[]>([])
const defaultFoldFlag = ref(false)

Bus.on("switchView", () => {
  mapWork.initCameraView()
})

Bus.on("checkDevices", (data:any) => {
  mapWork.showEntity(data)
})
mapWork.eventTarget.on("openDetailsPannel", (event: any) => {
  openDetail(event.item)
  console.log("openDetail====", event.item)
})

// 加载街道信息
mapWork.eventTarget.on("loadStreetData", (e) => {
  // 加载街道信息
  const data = e.data
  streets.value = data.map(item => ({
    value: item,
    label: item
  }))
  selectedValue.value = streets.value[0].value
})

// 加载监测站点信息
mapWork.eventTarget.on("loadPointData", (e) => {
  // 加载街道信息
  const data = e.data
  viewData.value = data
  getShowData()
})

// 选择街道
const streetChange = () => {
  getShowData()
}

const getShowData = () => {
  // 对数据进行排序，未超标的在前面，为0的在最后
  currentViewData.value = viewData.value.filter(item => item.street === selectedValue.value).sort((a, b) => {
    const valA = Number(a.leqRtd) || 0
    const valB = Number(b.leqRtd) || 0
    if (valA === 0 && valB === 0) { return 0 }
    if (valA === 0) { return 1 }
    if (valB === 0) { return -1 }
    return valA - valB
  })
}
// 打开企业详情页面
const openDetail = (item: any) => {
  disable(["detailsZP", "detailsSb"])
  if (item.deviceTypeCode === "ZP") {
    if (getWidget("detailsZP")) {
      activate({ name: "detailsZP", data: { details: item } })
    } else {
      $message("您单击了站点：" + item.NAME)
    }
  } else {
    if (getWidget("detailsSb")) {
      activate({ name: "detailsSb", data: { details: item } })
    } else {
     $message("您单击了站点：" + item.NAME)
    }
  }
}

const flyTo = (item: any) => {
  mapWork.flyToPoint(item)
}

onUnmounted(() => {
})
</script>

<style lang="less" scoped>
.yjzy-search {
  width: 100% !important;
  height: 42px;
  overflow: hidden;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 320px;
  border: 1px solid var(--mars-primary-color);
  background: var(--mars-bg-base);

  .ant-select {
    border: none;
    background: none;
    height: 44px;
    outline: none;
    // padding-left: 10px;
    flex-grow: 1;
    font-size: 15px !important;

    :deep(.ant-input) {
      color: var(--mars-base-color) !important;
    }
    :deep .ant-select-selector{
      .ant-select-selection-item{
        line-height: 44px !important;
      }
    }

  }

  .button {
    height: 100%;
    width: 55px;
  }
}

.yjzy-content {
  height: calc(100% - 62px);
  position: relative;
  box-sizing: border-box;
  margin-top: 10px;
  background: rgba(0, 48, 64, 0.4);
  border: 1px solid rgba(64, 108, 130, 0.4);
  border-radius: 5px;
  overflow-y: auto;
  overflow-x: hidden;
  // width: 21.5625vw;
  .search-list {
    width: 100%;
    padding: 0 10px;
    margin-top: 10px;
    float: left;
    box-sizing: border-box;
  }

  .container1 {
    padding: 0 0 5px 0;
    height: 10.74vh;
    min-height: 90px;
    &:after {
      content: "";
      width: 100%;
      height: 1px;
      position: absolute;
      left: 0;
      background: linear-gradient(90deg, rgba(0, 138, 255, 0) 0%, rgba(0, 138, 255, 0.98) 48%, rgba(0, 138, 255, 0) 100%);
      opacity: 0.4;
    }



    .typeLabel {
      color: #92b9cc;
      font-size: 12px;
      position: absolute;
      right: 0;
      top: 0;
    }

    .typeLabel_item {
      right: 36px;
    }

    .typeLabel_detail {
      color: #26ddff;

      &:hover {
        text-decoration: underline;
      }
    }

    .search-nodata {
      text-align: center;
    }
  }

  .container2 {
    cursor: pointer;
    position: relative;
    display: flex;
    height: 100%;

    .item-left {
      // width: 40%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
      width: 100px;
      .num{
        font-weight: 800;
        font-size: 28px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
      .text{
        font-weight: 800;
        font-size: 16px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }

    .item-right {
      width: calc(100% - 100px);
      text-align: right;
      color: #5aa9ff;
      font-size: 14px;
      padding: 5px 0;
    }

    .line1 {
      position: relative;
      margin-bottom: 2vh;
    }

    .line2 {
      font-family: "宋体";
      // color: #92bacd;
      line-height: 20px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .line3 {
      font-family: "宋体";
      // color: #92bacd;
      line-height: 20px;

    }
  }
}
</style>
